import NewsIcon from "@src/assets/news.svg?react"
import ContactsIcon from "@src/assets/contacts.svg?react"
import MusicIcon from "@src/assets/music.svg?react"
import "./index.scss"
import {Link, useLocation} from "react-router-dom";
import Player from "@src/components/player"
import {UserInfoType} from "@src/services/userinfo.ts";
import {useMemo} from "react";


const pathnameList = ["/home/news", "/home/chatRoom", "/home/music"]
export default function BottomNavigationBar() {
    const location = useLocation();
    const pathname = location.pathname.split("/")[2]

    const LinkList = useMemo(() => {
        const {user}: UserInfoType = JSON.parse(localStorage.getItem('UserData') as string)
        const LinkList = [
            {
                path: "/home/music",
                component: <MusicIcon/>,
                text: "音乐"
            },
            {
                path: "/home/chatRoom",
                component: <ContactsIcon/>,
                text: "聊天室"
            }
        ]
        if (!user.isVisitor) {
            LinkList.push({
                path: "/home/news",
                component: <NewsIcon/>,
                text: "消息"
            })
        }
        return LinkList
    }, []);
    //判断 Player 是否显示
    const PlayerIsShow = useMemo(() => {
        let b = false
        b = location.pathname.includes("/music")
        if (location.pathname.includes("/SongDetail")) {
            b = false
        }
        return b
    }, [location.pathname])

    return (
        <div>
            <div className={"player-container " + (PlayerIsShow && "isMusic")}>
                <Player></Player>
            </div>

            <ul id="bottomNavigationBar"
                style={{animationName: pathnameList.includes(location.pathname) ? "slideUp" : "slideDown"}}>
                {LinkList.map((item) => (
                    <Link key={item.path} to={item.path}>
                        <li className={item.path.includes(pathname) ? "select" : ""}>
                            {item.component}
                            <p>{item.text}</p>

                        </li>
                    </Link>
                ))}
            </ul>

        </div>
    )
}